<template>
  <div>
    <div class="thead">标签列表
      <div class="addpar" @click="showAddTags()">
        <img class="add" src="../../images/main/add.png" alt> 新增标签
      </div>
    </div>
    <div class="box">
      <div class="top_box">
        <ul class="section_01">
          <li class="nav01">标签内容</li>
          <li class="nav02">更新时间</li>
          <li class="nav03">操作</li>
        </ul>
      </div>
      <div class="next_box">
        <ul class="section_02" v-for="(item,index) in tagList" :key="index">
          <li class="line01">{{item.name}}</li>
          <li class="line02">{{setDate(item.time)}}&nbsp;&nbsp;{{setTime(item.time)}}</li>
          <li class="line03">
            <a @click="editTags(item.name,item.id)">编辑</a>
            <a @click="delTags(item.id)">删除</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="task" v-if="task">
<div class="bgc">
                <div class="box_tip">
                    <div class="tips">{{tagTitle}}</div>
                    <div class="btn_x">
                        <a class="x"  @click="closeTag()">×</a>
                    </div>
                    <hr>
                    <input class="text_input" type="text" placeholder="请输入标签" v-model="name">
                    <div class="btn_submit" type="submit" @click="saveTags()" >提交</div>
                
                </div>
            </div>
    </div>
  </div>
</template>
<script>
import Global from "../tool/Global.vue";
import axios from "axios";
import qs from "qs";
export default {
  data() {
    return {
      tagList: [],
      name:'',
      task:false,
      isEdit: false,
      tagTitle:'新增标签',
      tagId : ''
    };
  },
  methods: {
      /**
       * 显示标签
       */
      showAddTags: function () {
          this.task = true
          this.isEdit = true
          this.tagTitle = '新增标签'
          this.name = ''
          this.tagId = ''
      },
      /**
       * 关闭标签修改
       */
      closeTag: function () {
          this.task = false
      },
      /**
       * 编辑标签
       */
      editTags: function (name,id) {
          this.name = name
          this.isEdit = true
          this.task = true
          this.tagTitle = '编辑标签'
            this.id = id
      },
    /**
     * 查询标签列表
     */
    getTagList: function() {
      let that = this;
      axios({
        method: "post",
        url: `${that.$store.state.url}/tLabel/selectList`
        // data:qs.stringify(that.params)
      }).then(res => {
        console.log(res);
        if (res.data.code == 0) {
          that.tagList = res.data.data;
        } else {
          alert(res.msg);
        }
      });
    },
    /**
     * 删除标签
     */
    delTags: function(id) {
        let that = this
        if(confirm('确认删除?')){
      axios({
        method: "post",
        url: `${that.$store.state.url}/tLabel/delLabel`,
        data: qs.stringify({ id: id })
      }).then(res => {
        console.log(res);
        if (res.data.code == 0) {
          this.getTagList();
        } else {
          alert(res.msg);
        }
      });
        }
    },
    /**
     * 保存标签
     */
    saveTags: function () {
        let that = this
        let data = {
            name:that.name,
            id:that.id
        }
        let url = `${that.$store.state.url}/tLabel/addLabel`
        if(that.isEdit) {
            url = `${that.$store.state.url}/tLabel/updateLabel` 

        }        
        axios({
        method: "post",
        url: url,
        data: qs.stringify(data)
      }).then(res => {
        console.log(res);
        if (res.data.code == 0) {
          that.getTagList();
          that.task = false
        } else {
          alert(res.msg);
        }
      });
    },
    /**
     * 根据时间毫秒数 返回年月日
     */
    setDate: function(str) {
      let times = new Date(str);
      return `${times.getFullYear()}-${
        times.getMonth() < 10 ? "0" + times.getMonth() : times.getMonth()
      }-${times.getDate() < 10 ? "0" + times.getDate() : times.getDate()}`;
    },
    /**
     * 根据时间毫秒数 返回时分秒
     */
    setTime: function(str) {
      let times = new Date(str);
      return `${
        times.getHours() < 10 ? "0" + times.getHours() : times.getHours()
      }:${
        times.getMinutes() < 10 ? "0" + times.getMinutes() : times.getMinutes()
      }:${
        times.getSeconds() < 10 ? "0" + times.getSeconds() : times.getSeconds()
      }`;
    }
  },
  mounted() {
    this.getTagList();
  }
};
</script>
<style scoped>
.thead {
  text-align: left;
  font-family: PingFangSC-Medium;
  font-size: 18px;
  color: #000000;
  height: 69px;
  line-height: 69px;
  padding-left: 15px;
  background: #f6f6f6;
  border: 1px solid #dddddd;
  box-sizing: border-box;
  font-weight: bold;
  margin-left: 26px;
  width: 1488px;
}
.addpar {
  background: #f6f6f6;
  border: 1px solid #4B74FF;
  border-radius: 2px;
  width: 107px;
  height: 33px;
  float: right;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  line-height: 33px;
  margin-top: 17px;
  margin-right: 20px;
  color: #4B74FF;
  cursor: pointer;
}
.add {
  width: 18px;
  height: 18px;
  float: left;
  margin: 8px;
}
.box {
  background: #ffffff;
  border: 1px solid #dddddd;
  border-bottom: 0;

  box-shadow: 0 2px 4px 0 #dddddd;
  width: 1488px;
  display: inline-block;
  overflow: hidden;
  margin-left: 26px;
  margin-top: 25px;
}
.top_box {
  background: #b7cde6;
  border-bottom: 1px solid #dddddd;
  width: 100%;
  overflow: hidden;
}
.section_01 {
  overflow: hidden;
}
.top_box .section_01 li {
  font-family: PingFangSC-Medium;
  font-size: 20px;
  color: #000000;
  letter-spacing: 0.03px;
  line-height: 67px;
  float: left;
  list-style: none;
  text-align: center;
  width: calc((100% - 2px) / 3);
}

.next_box {
  width: 100%;
  overflow: hidden;
}
.section_02 {
  height: calc(433px / 4);
  border-bottom: 1px solid #dddddd;
  overflow: hidden;
}
.section_02:last-child {
  border-bottom: 0;
}
.section_02 li {
  font-family: PingFangSC-Medium;
  font-size: 18px;
  color: #4a4a4a;
  letter-spacing: 0.03px;
  height: calc(433px / 4);
  float: left;
  list-style: none;
  text-align: center;
  line-height: calc(433px / 4);
  width: calc((100% - 2px) / 3);
}
.section_02 .line03 a {
  font-family: PingFangSC-Medium;
  font-size: 20px;
  color: #4B74FF;
  letter-spacing: 0.03;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.box_tip{background:#ffffff;
    box-shadow:0 2px 9px 0 rgba(0,0,0,0.50);
    border-radius:8px;
    width:646px;
    height:399px;
    text-align:center;
    padding-top:21px;
    overflow:hidden;
    position: fixed;
    top:0;
    right: 0;
    left: 0;
    bottom: 0;
    margin:auto;
    z-index:2000;}
    .tips{font-family:PingFangSC-Medium;
        font-size:20px;
        color:#000000;
        font-weight: bold;
        height: 35px;
        line-height: 35px;
        }
    .btn_x{background:#9b9b9b;
            width:86px;
            height:86px;
            border-radius:100%;
            position: absolute;
            right:-43px;
            top:-43px;
            }
        .x{font-size: 25px;
        text-decoration: none;
        position: absolute;
        left: 19px;
        bottom:15px;
        color: #fff;
        font-weight: bold;
        }
    hr{opacity:0.38;
        background-color: #979797;
        width:306px;
        height:2px;
        margin-top:8px;}
    .text_input{margin-top:103px;
        background:#ffffff;
        box-shadow:inset 0 1px 3px 0 rgba(0,0,0,0.50);
        width:311px;
        height:40px;
        text-align: center;
        font-size:18px;
color:#4a4a4a;}
    .btn_submit{display:block;
        margin:84px auto;
        background:#4B74FF;
        width:200px;
        height:45px;
        line-height: 45px;
        padding: 0px;
        margin-bottom: 0px;
        cursor: pointer;
        color: #ffffff;}

</style>

